<template>
  <div class="product-requirement-container">
    <h2>产品需求管理</h2>
    <p>这是一个简化版的产品需求管理页面</p>
    
    <el-button type="primary" @click="handleAddRequirement">
      <el-icon><Plus /></el-icon>
      新增需求
    </el-button>
    
    <el-table v-if="requirementList.length > 0" :data="requirementList" style="width: 100%">
      <el-table-column prop="id" label="需求ID"></el-table-column>
      <el-table-column prop="requirementName" label="需求名称"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
    
    <div v-else>
      <el-empty description="暂无需求数据" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'ProductRequirement',
  components: {
    Plus
  },
  setup() {
    const requirementList = ref([])
    
    onMounted(() => {
      // 加载模拟数据
      requirementList.value = [
        {
          id: 1,
          requirementName: '用户管理模块功能优化',
          status: '规划中'
        },
        {
          id: 2,
          requirementName: '数据报表功能开发',
          status: '开发中'
        },
        {
          id: 3,
          requirementName: '移动端适配优化',
          status: '待测试'
        }
      ]
    })
    
    const handleAddRequirement = () => {
      ElMessage.success('新增需求功能')
    }
    
    return {
      requirementList,
      handleAddRequirement
    }
  }
}
</script>

<style scoped>
.product-requirement-container {
  padding: 20px;
}
</style>